<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车全选</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        div {
            text-align: center;
        }
        
        button {
            width: 65px;
            height: 30px;
            font-size: 15px;
        }
        
        table {
            width: 300px;
            margin: 0 auto;
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }
        
        th,
        td {
            border: 1px solid #c0c0c0;
            padding: 10px;
            color: #404060;
        }
        
        th {
            background: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
        
        td {
            font: 14px "微软雅黑";
        }
        
        tbody tr {
            background-color: #f0f0f0;
        }
        
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
</head>

<body>
    <div>请输入商品：<input type="text" id="shop"></div>
    <div>请输入价格：<input type="text" id="price"></div>
    <div>
        <button id="add">添加</button>
        <button id="select">反选</button>
        <button id="delSelect">删除选中</button>
        <button id="delAll">全部删除</button>
    </div>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" id="headCheck"></th>
                <th>商品</th>
                <th>价格</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>iPhone8</td>
                <td>8000</td>
                <td><a href="javascript:;" class="del">删除</a></td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>iPad Pro</td>
                <td>5000</td>
                <td><a href="javascript:;" class="del">删除</a></td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>iPad Air</td>
                <td>2000</td>
                <td><a href="javascript:;" class="del">删除</a></td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>Apple Watch</td>
                <td>2000</td>
                <td><a href="javascript:;" class="del">删除</a></td>
            </tr>
        </tbody>
    </table>
    <script>
        $(function() {
            /* 全选或全不选 */
            $('#headCheck').click(function() {
                $('tbody').find('input').prop('checked', $(this).prop('checked'))
            })

            /* 如果小复选框全被选上，则全选按钮选上，否则不选 */
            $('tbody').find('input').change(function() {
                if ($('tbody').find('input:checked').length === $('tbody').find('input').length) {
                    $('#headCheck').prop('checked', true)
                } else {
                    $('#headCheck').prop('checked', false)
                }
            })

            /* 添加 */
            $('#add').click(function() {
                console.log();
                console.log();
                $('tbody').append('<tr><td><input type="checkbox"></td><td>' + $('#shop').val() + '</td><td>' + $('#price').val() + '</td><td><a href="javascript:;" class="del">删除</a></td></tr>')
            })

            /* 反选 */
            $('#select').click(function() {
                $('tbody').find('input').each(function() {
                    $(this).prop('checked', !$(this).prop('checked'))
                })
            })

            /* 删除该行 */
            $('.del').click(function() {
                if (confirm('您确定要删除吗？')) {
                    $(this).parents('tr').remove()
                }
            })

            /* 删除选中 */
            $('#delSelect').click(function() {
                if (confirm('您确定要删除吗？')) {
                    $('tbody').find('input:checked').parents('tr').remove()
                }
            })

            /* 全部删除 */
            $('#delAll').click(function() {
                if (confirm('您确定要删除吗？')) {
                    $('tbody').find('tr').remove()
                }
            })
        })
    </script>
</body>

</html>